<style>
  #arena-pinned-box {
    width: 100%px;
    height: auto;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #arena-pinned-box img {
    width: 100%;
    height: auto;
    display: block;
  }
  #arena-pinned-box .text-content {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
  }
  #arena-pinned-box .loading {
    padding: 40px;
    text-align: center;
    color: #999;
  }
  #arena-pinned-box .block-item {
    width: 100%;
    margin-bottom: 10px;
  }
  #arena-pinned-box .block-item:last-child {
    margin-bottom: 0;
  }
</style>
<div id="arena-pinned-box">
  <div class="loading">ᕕ( ᐛ )ᕗ</div>
</div>
<script>
{
  const token = "K4YGMslfMBJc-Dr0E24wX0r6XtwP883-MheiFmoLN7A";
  const numBlocks = 3;
  const slug = "media-log-laswyfxghne";
  async function loadFirst() {
    try {
      const res = await fetch("https://api.are.na/v3/channels/" + slug + "/contents?per=100&sort=created_at_desc", {headers: {"Authorization": "Bearer " + token}});
      const data = await res.json();
      const blocks = data.data || [];
      if (blocks.length === 0) {
        document.getElementById("arena-pinned-box").innerHTML = '<div class="loading">No blocks found.</div>';
        return;
      }
      blocks.sort((a, b) => {
        const ta = a.connection && a.connection.connected_at ? new Date(a.connection.connected_at) : new Date(0);
        const tb = b.connection && b.connection.connected_at ? new Date(b.connection.connected_at) : new Date(0);
        return tb - ta;
      });
      const displayBlocks = blocks.slice(0, numBlocks);
      const box = document.getElementById("arena-pinned-box");
      let allHtml = '';
      displayBlocks.forEach(block => {
        let html = '';
        if (block.type === "Image" && block.image) {
          const src = (block.image.large && block.image.large.src) || block.image.src || '';
          html = '<img src="' + src + '" alt="">';
        } else if (block.type === "Text" && block.content) {
          html = '<div class="text-content">' + (block.content.html || block.content.markdown || '') + '</div>';
        } else if (block.type === "Link" && block.image && block.image.large) {
          html = '<img src="' + block.image.large.src + '" alt="Preview">';
        } else if (block.type === "Embed" && block.embed) {
          const e = block.embed;
          if (e.html) {
            const ratio = e.height && e.width ? (e.height / e.width * 100).toFixed(2) : 56.25;
            html = '<div style="position:relative;padding-bottom:' + ratio + '%"><div style="position:absolute;inset:0">' + e.html + '</div></div>';
          } else if (block.image && block.image.large) {
            html = '<img src="' + block.image.large.src + '" alt="Preview">';
          }
        } else if (block.type === "Attachment" && block.attachment) {
          const a = block.attachment;
          if (a.content_type && a.content_type.startsWith("video/")) {
            html = '<video controls style="width:100%;display:block"><source src="' + a.url + '" type="' + a.content_type + '"></video>';
          } else if (a.content_type && a.content_type.startsWith("audio/")) {
            html = '<div class="text-content"><audio controls style="width:100%"><source src="' + a.url + '" type="' + a.content_type + '"></audio></div>';
          } else if (block.image && block.image.large) {
            html = '<img src="' + block.image.large.src + '" alt="Preview">';
          } else {
            html = '<div class="text-content">' + (block.title || a.filename || 'Attachment') + '</div>';
          }
        } else if (block.image && block.image.large) {
          html = '<img src="' + block.image.large.src + '" alt="Preview">';
        } else {
          html = '<div class="text-content">' + (block.title || 'Block') + '</div>';
        }
        allHtml += '<div class="block-item">' + html + '</div>';
      });
      box.innerHTML = allHtml;
    } catch (err) {
      document.getElementById("arena-pinned-box").innerHTML = '<div class="loading">Error loading.</div>';
    }
  }
  loadFirst();
}
</script>